<script type="text/javascript" src="src/js/echarts.min.js"></script>
<script type="text/javascript" src="src/js/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="src/js/jquery-ui/jquery-ui.min.css">

<div class="layui-col-md12">
  <div class="layui-card">
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <div class="layui-input-inline">
            <select name="system" lay-verify="system" lay-filter="system"></select>
          </div>
          <div class="layui-input-inline">
            <select name="chartType" lay-verify="chartType" lay-filter="chartType">
              <option value="type">按类型</option>
              <option value="site" disabled>按地点(开发中)</option>
              <option value="style" disabled>按式样(开发中)</option>
              
            </select>  
          </div>
          <div class="layui-input-inline">
            <label class="layui-form-label">老旧基准</label>
            <div class="layui-input-block">
              <input type="text" id="spinner" name="year" autocomplete="off" value="5">
            </div>
          </div>
        </div>  
      </form>
    </div>
  </div>
</div>
<div class="layui-col-md12">
  <div class="layui-card">
    <div class="layui-card-body">
      <div id="chart-old" style="min-height:600px;"></div>
    </div>
  </div>
</div>

<script>
var access_token = sessionStorage.access_token;
var userId = sessionStorage.userid;
var spinner = $( "#spinner" ).spinner({
  min: 0,
  max: 20,
  step: 1,
  spin: function( event, ui ) {
    getChartData(ui.value);
  }
});

layui.use(['form'], function(){
  var form = layui.form;

  var selectData;
  //获取select选项
  $.ajax({
    url: 'actionApi/Stn/select',
    type:'post',
    data:{"userId":userId},
    headers:{"Authorization":"Basic "+access_token},
    success:function(res){
      selectData = res.data;
      var systemList = selectData.system;
      for(var key in systemList){
        $('select[name="system"]').append('<option value="'+key+'">'+systemList[key]+'</option>');
      }
      form.render('select');

      var oldBenchmark = spinner.val();
      getChartData(oldBenchmark);  //获取图表数据
      
    }
  });
  
  form.on('select', function(data){
    var oldBenchmark = spinner.val();
    getChartData(oldBenchmark);
  });
});

//获取图表数据函数
function getChartData(oldBenchmark){
  var systemId = $('select[name="system"]').val();  //获取系统ID
  var chartType = $('select[name="chartType"]').val();  //获取图表类型
    //获取老旧基准
  $.ajax({
    url: 'actionApi/OldChart/'+chartType,
    type:'post',
    data:{
      "systemId":systemId,
      "oldBenchmark":oldBenchmark,
    },
    headers:{"Authorization":"Basic "+access_token},
    success:function(res){
      if(res.code==0){
        var xData = [];
        var oldData = [];
        var overData = [];
        var underData = [];
        for(i in res.data){
          xData.push(res.data[i].TYPE_NAME);
          oldData.push(res.data[i].OLD_COUNT);
          overData.push(res.data[i].SERVICE_COUNT);
          underData.push(res.data[i].OK_COUNT);
        }
        chartOldShow(xData,oldData,overData,underData);
      }

    }
  });
}


//老旧率情况图显示函数
function chartOldShow(xData,oldData,overData,underData){
  var chartOld = echarts.init(document.getElementById('chart-old'));
  var rotate = 0;
  if(xData.count>=10){rotate = -30}   //如果数据类别过多，文字倾斜30度
  // 指定图表的配置项和数据
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      data:['老旧','过保','在保']
    },

    yAxis:  {
      type: 'value'
    },
    xAxis: {
      type: 'category',
      axisLabel:{
        interval:0,//横轴信息全部显示
        rotate:rotate
      },
      data: xData
    },
    series: [
      {
        name: '老旧',
        type: 'bar',
        barMaxWidth:45,   //最大宽度
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        },
        data: oldData
      },
      {
        name: '过保',
        type: 'bar',
        barMaxWidth:45,   //最大宽度
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        },
        data: overData
      },
      {
        name: '在保',
        type: 'bar',
        barMaxWidth:45,   //最大宽度
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'inside'
          },
        },
        data: underData
      },
    
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  chartOld.setOption(option);
}



</script>